<template>
  <div class="container">
    <div style="display:flex;justify-content:flex-start;align-items:center;">
      <span>这里用来随机一首音乐</span>
      <el-select v-model="selectVal" placeholder="请选择音乐类型" style="margin-left:20px;">
        <el-option
          v-for="item in selectList"
          :key="item.label"
          :label="item.label"
          :value="item.label">
        </el-option>
      </el-select>
      <el-button type="primary" style="margin-left:20px;" @click="action">随机</el-button>
    </div>
    <div style="margin-top:20px;width:90%;display:flex;flex-direction:column;">
      <span>歌手：{{artistsname}}</span>
      <span style="margin-top:10px;">歌名：{{name}}</span>
      <div style="display:flex;flex-wrap:nowrap;margin-top:10px">
        <span>封面：</span>
        <img :src="picurl" style="width:200px;height:200px" alt="">
      </div>
      <div id='playMusic'>
        <audio
        ref='audio'
        :src='musicUrl'
        @pause="onPause"
        @play='onplay'
        @timeupdate="onTimeupdate"
        @loadedmetadata="onLoadedmetadata"></audio>
        <el-button type='text' @click='startPlayOrPause'>{{audio.playing | transPlayPause}}</el-button>
        <!-- 进度条 -->
        <el-slider v-model="sliderTime" :format-tooltip="formatProcessToolTip" @change="changeCurrentTime" class="slider"></el-slider>
        <span>{{audio.currentTime | formartSecond}} / </span>
        <span>{{audio.maxTime | formartSecond}}</span>
      </div>
    </div>
  </div>
</template>

<script>
// 将整数转换成 时：分：秒的格式
function realFormatSecond(second) {
  var secondType = typeof second

  if (secondType === 'number' || secondType === 'string') {
    second = parseInt(second)

    var hours = Math.floor(second / 3600)
    second = second - hours * 3600
    var mimute = Math.floor(second / 60)
    second = second - mimute * 60

    return hours + ':' + ('0' + mimute).slice(-2) + ':' + ('0' + second).slice(-2)
  } else {
    return '0:00:00'
  }
}

import { randomMusic } from '@/common/common'

export default {
  data() {
    return {
      selectList:[
        {label:"热歌榜"},
        {label:"新歌榜"},
        {label:"飙升榜"},
        {label:"抖音榜"},
        {label:"电音榜"},
      ],
      selectVal:"",
      artistsname:"",
      name:"",
      picurl:"",
      musicUrl:"",
      sliderTime: 0,
      audio: {
        maxTime: 0, /* 音频最大播放时长 */
        currentTime: 0, /* 当前播放时长 */
        playing: false /* 音频当前处于播放/暂停状态 */
      }
    }
  },
  filters: {
    /* 使用vue过滤器动态改变按钮的显示 */
    transPlayPause (value) {
      return value ? '暂停' : '播放'
    },
    /* 整数转换时分秒 */
    formartSecond (second = 0) {
      return realFormatSecond(second)
    }
  },
  methods:{
    action(){
      if(this.selectVal == ''){
        this.$message.error("请先选择音乐类型");
        return;
      }
      let params = {
        type:this.selectVal
      };
      randomMusic(params).then((res) => {
        if(res.status == 200){
          let content = JSON.parse(res.data.body);
          if(content.code == 1){
            this.artistsname = content.data.artistsname;
            this.name = content.data.name;
            this.picurl = content.data.picurl;
            this.musicUrl = content.data.url;
          }
        }
      })
      .catch((err) => {
        console.log(err);
      })
    },
    /* 进度条格式化toolTip */
    formatProcessToolTip (index = 0) {
      index = parseInt(this.audio.maxTime / 100 * index)
      return '时长：' + realFormatSecond(index)
    },
    /* 拖动进度条，改变当前时间 index是进度条改变时的回调函数的参数 值为0~100之间，需要换算成实际时间 */
    changeCurrentTime (index) {
      this.$refs.audio.currentTime = parseInt(index / 100 * this.audio.maxTime)
    },
    /* 音频加载完成后的回调函数 */
    onLoadedmetadata (res) {
      this.audio.maxTime = parseInt(res.target.duration)
    },
    /* 每秒触发一次 用来更新当前播放时间 */
    onTimeupdate (res) {
      this.audio.currentTime = res.target.currentTime
      /* 当音频播放时 进度条也要随之改变 */
      this.sliderTime = parseInt(this.audio.currentTime / this.audio.maxTime * 100)
    },
    /* 控制音频播放、暂停 */
    startPlayOrPause () {
      this.audio.playing ? this.pause() : this.play()
    },
    /* 播放音频 */
    play () {
      this.$refs.audio.play()
    },
    /* 暂停音频 */
    pause () {
      this.$refs.audio.pause()
    },
    /* 当音频播放 */
    onplay () {
      this.audio.playing = true
    },
    /* 当音频暂停 */
    onPause () {
      this.audio.playing = false
    }
  }
}
</script>

<style>
.container {
  width: 100%;
  padding: 1%;
  margin: 0 auto;
}

</style>

<style>
#playMusic {
  display: flex;
  align-items: center;
  margin-top:10px
}
.el-button {
  margin-right: 15px;
}
.slider {
  width: 150px;
  margin-right: 15px;
}
#playMusic > span:nth-of-type(2) {
  margin-left: 5px;
}
</style>
